<template>
  <view class="orderlist-container">
    <view class="orderlist-title" :style="{marginBottom:partPaymentLists.length?'48rpx':'0'}">
      <view class="orderlist-title-text" @click="gotoorderlist">我的订单</view>
      <view class="orderlist-title-img" @click="gotoorderlist">
        <img src="https://100000063-1252208446.file.myqcloud.com/images/right1.png" class="orderlist-title-img-icon" />
      </view>
    </view>

    <swiper :slidesPerView="1" class="my-swiper" indicator-dots="false" :pagination="false"
        indicator-color="rgba(0,0,0,0)" indicator-active-color="rgba(0,0,0,0)" v-if="partPaymentLists.length ==1">
        <swiper-item v-for="(item, index) in partPaymentLists" :key="index" class="swiper-item-a" @click="lookDetail(item)">
            <view class="swiper-item-title">
              <view class="swiper-item-text1">
                  {{ `${new Date(item.items[0].createTime).getFullYear()}年${new Date(item.items[0].createTime).getMonth() + 1}月${new Date(item.items[0].createTime).getDate()}日` }}
              </view>
              <view class="swiper-item-text2" :style="{color: item.textColor}">{{ getStatusText(item.status) }}</view>
            </view>
            <view class="swiper-item-content">
              <img v-if="item.items.length <2" :src="item.items[0].skuImageUrl" class="swiper-item-content-img" />
              <view style="display: flex;" v-else>
                <img :src="item.items[0].skuImageUrl" alt="" class="swiper-item-content-img-item" />
                <img :src="item.items[1].skuImageUrl" alt="" class="swiper-item-content-img-item" style="position: relative;left:-8px;z-index:-1" />
              </view>
              <view class="swiper-item-content-text1">
                <view class="overflowtext"> {{ item.items[0].itemName }}</view>
                <view class="swiper-item-content-text2">共{{ item.itemQty }}件</view>
              </view>
            </view>
        </swiper-item>
    </swiper>

    <swiper :slidesPerView="1" class="my-swiper" indicator-dots="false" :pagination="false"
      indicator-color="rgba(0,0,0,0)" indicator-active-color="rgba(0,0,0,0)" v-if="partPaymentLists.length > 1">
      <swiper-item v-for="(item, index) in partPaymentLists" :key="index" class="swiper-item" @click="lookDetail(item)">
        <view class="swiper-item-title">
          <view class="swiper-item-text1">
              {{ `${new Date(item.items[0].createTime).getFullYear()}年${new Date(item.items[0].createTime).getMonth() + 1}月${new Date(item.items[0].createTime).getDate()}日` }}
          </view>
          <view class="swiper-item-text2" :style="{color: item.textColor}">
              {{ getStatusText(item.status) }}
          </view>
        </view>
        <view class="swiper-item-content">
          <img v-if="item.items.length <2" :src="item.items[0].skuImageUrl" class="swiper-item-content-img" />
          <view style="display: flex;" v-else>
            <img :src="item.items[0].skuImageUrl" alt="" class="swiper-item-content-img-item" />
            <img :src="item.items[1].skuImageUrl" alt="" class="swiper-item-content-img-item" style="position: relative;left:-8px;z-index:-1" />
          </view>
          <view class="swiper-item-content-text1-a">
            <view class="overflowtext"> {{ item.items[0].itemName }}</view>
            <view class="swiper-item-content-text2">共{{ item.itemQty }}件</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="group-title" :style="{marginTop: partPaymentLists.length ? '48rpx': '16rpx'}">
      <view class="title title1" @click="gotorecordList">
        <img src="https://100000063-1252208446.file.myqcloud.com/images/djls.png" class="title_img">登记历史
      </view>
      <view class="title title2" @click="gotowishList">
        <img src="https://100000063-1252208446.file.myqcloud.com/images/xyd.png" class="title_img">心愿单
      </view>
    </view>
    <img src="https://100000063-1252208446.file.myqcloud.com/images/PageDividers.png" style="width: 100%;height:12rpx;" />
  </view>
</template>

<script>
export default {
    props: {
      partPaymentArr: {
        type: Array,
      },
    },
    data() {
      return {
        currentIndex: 0,
        startTouchX: 0,
        endTouchX: 0,
        isDropDownOpen: false,
        partPaymentLists: []
      }
    },
    mounted() {
      this.partPaymentLists = this.partPaymentArr;
    },
    methods: {
      setOrderLists(lists){
        this.partPaymentLists = lists;
      },
        lookDetail(item) {
          uni.navigateTo({
            url: '/pages/order/details?orderNo=' + item.orderId
          });
        },

        gotorecordList() {
            this.$commonSensors.commonPageClick('MemberPageClick', '登记历史')
            uni.navigateTo({
                url: '/pages/customer/recordList'
            })
        },
        gotowishList() {
            this.$commonSensors.commonPageClick('MemberPageClick', '心愿单')
            uni.navigateTo({
                url: '/pages/customer/wishList'
            })
        },
        gotoorderlist() {
            this.$commonSensors.commonPageClick('MemberPageClick', '我的订单')
            uni.navigateTo({
                url: '/pages/order/list'
            })
        },

        getStatusText(status) {
            switch (status) {
                case 'WAIT_BUYER_PAY':
                    return '待支付';
                case 'BUYER_PART_PAYMENT':
                    return '继续支付';
                case 'WAIT_BUYER_CONFIRM_GOODS':
                    return '待收货';
                case 'TRADE_FINISHED':
                    return '已完成';
                case 'TRADE_CLOSED':
                    return '已取消';
                case 'TRADE_CLOSED_BY_CLOUD':
                    return '已关闭';
                case 'RETAIL_STORE_RECEIVED':
                    return '门店已收货';
                case 'DC_RECEIVED':
                    return '仓库已收货';
                case 'WAIT_SELLER_SEND_GOODS':
                    return '待发货';
                default:
                    return '';
            }
        },
    },
}
</script>

<style scoped>
.orderlist-container {
    background-color: #fff;
}

.orderlist-title {
    width: 654rpx;
    display: flex;
    justify-content: space-between;
    margin-left: 48rpx;

}

.orderlist-title-text {
    font-size: 36rpx;
    font-weight: 500;
    color: #000;
    height: 116rpx;
    line-height: 116rpx;
    font-family: "NotoSansSC-Medium";
    /* margin-left: 28rpx; */
}

.orderlist-title-img {
    /* width: 64rpx; */
    width: 160rpx;
    height: 116rpx;
    line-height: 116rpx;
    position: relative;
    left: 6rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.orderlist-title-img-icon {
    width: 64rpx;
    height: 64rpx;
    vertical-align: middle;
}

.my-swiper {
    width: 110%;
    height: 164px;
}

.swiper-item-title {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    padding: 32rpx 32rpx 0 32rpx;
}

.swiper-item-text1 {
    font-family: FrankNew-Regular,NotoSansSC-Regular;
    font-size: 24rpx !important;
    color: rgba(117, 117, 117, 1);
}

.swiper-item-text2 {
    font-size: 24rpx;
    font-family: FrankNew-Regular,NotoSansSC-Regular;
}

.swiper-item-content {
    display: flex;
    padding:18rpx;
    align-items: center;
    justify-content: space-evenly;
}

.swiper-item-content-img {
    width: 159rpx;
    height: 212rpx;
}

.swiper-item-content-img-item {
    width: 159rpx;
    height: 212rpx;
}

.swiper-item-content-text1 {
    font-family: FrankNew-Regular,NotoSansSC-Regular;
    width: 350rpx;
    height: 136rpx;
    font-size: 24rpx !important;
    color: rgba(0, 0, 0, 1);
    margin-left: 0rpx;
}
.swiper-item-content-text1-a{
    font-family: FrankNew-Regular,NotoSansSC-Regular;
    width: 350rpx;
    height: 136rpx;
    font-size: 24rpx !important;
    color: rgba(0, 0, 0, 1);
    margin-left: 0rpx;
}
.overflowtext {
    width: 260rpx;
    height: 80rpx;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'FrankNew-Regular';
    font-size: 24rpx;
    width: 100%;
    line-height: 40rpx;

}

.swiper-item-content-text2 {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #757575;
}

.swiper-item {
    width: 590rpx !important;
    height: 328rpx;
    background-color: #FAFAFA;
    margin-left: 48rpx;
    border-right:30rpx solid #fff;
    font-family: 'FrankNew-Regular';
}
.swiper-item-a{
    width: 80% !important;
    height: 328rpx;
    background-color: #FAFAFA;
    margin-left: 48rpx;
    border-right:30rpx solid #fff;
    font-family: 'FrankNew-Regular';
}

.group-title {
    display: flex;
    justify-content: center;
    height: 112rpx;
    line-height: 112rpx;
    margin-top: 48rpx;
    margin-bottom: 48rpx;
    font-family: 'FrankNew-Regular';
}

.title {
    text-align: center;
    font-family: 'NotoSansSC-Medium';
    width: 327rpx;
    font-style: normal;
    font-weight: 400;
    font-size: 24rpx;
    border: 1px solid rgba(250, 250, 250, 1);
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.title_img{
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
}
.title1 {
    border-right: none;
}
</style>
